<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-08-22 14:27:28
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-29 16:55:37
 * @FilePath: \register-pay-screen\src\components\screenLeftThird.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="screenLeftThird">
        <Title>
            <template #title>
                今日实时预警
            </template>
        </Title>
        <div class="contentBox" :style="{ height: props.screenLeftThirdHeight + 'px' }">
            <div class="itemFlex" v-for="(item, index) in list" :key="index">
                <el-image :src="item.level == 3 ? errImg : item.level == 2 ? warning : defaults"></el-image>
                <div class="info" :class="item.level == 3 ? 'err' : item.level == 2 ? 'warning' : 'defaults'">{{`${item.create_time.slice(11)}`}}
                    <span style="margin-left: 8px;">{{ item.msg }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import errImg from '../assets/images/err.png'
import warning from '../assets/images/warning.png'
import defaults from '../assets/images/default.png'
import { ref, onMounted } from "vue"
import { alertList } from './Options/Api'
import { PiniaStore } from '../store/index'
const store = PiniaStore()
interface PropsType {
    screenLeftThirdHeight?: any
    verify_code?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    screenLeftThirdHeight: [],
    verify_code: ''
})
const list = ref<any>([])
const getList = async () => {
    const res: any = await alertList({
        verify_code: props.verify_code,
    })
    return new Promise(async (resolve) => {
        if (res.code !== 1) return false
        list.value = res.data.list
        store.setLoddingStatus()
        resolve(undefined) // 所有操作完成后resolve
    })
}
onMounted(async () => {
})
defineExpose({ getList })
</script>
<style scoped lang="scss">
.screenLeftThird {
    .contentBox {
        background: rgba(7, 77, 183, 0.16);
        border-radius: 10px;
        padding: 16px 20px;
        margin-top: 20px;
        overflow-y: scroll;

        .itemFlex {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .el-image {
                width: 36px;
                height: 36px;
                margin-right: 10px;
            }

            .info {
                flex: 1;
                height: 36px;
                line-height: 36px;
                border-radius: 4px;
                padding: 0 20px;
                font-weight: bold;
                font-size: 14px;
            }

            div.err {
                background: #482341;
            }

            div.warning {
                background: #533E31;
            }

            div.defaults {
                background: #092561;
            }
        }

        .itemFlex:last-of-type {
            margin-bottom: 0;
        }
    }
}
</style>
